<template>
    <div class="register">
        <h1>欢迎来到互助筹</h1>
        <div class="list">
            <input type="number"  v-model="tel" placeholder="请输入手机号">
        </div>
        <div class="list flex-between">
            <input type="number"  v-model="yzCode" placeholder="请输入验证码" class="yzCode">
            <button @click="sendCode">{{codeText}}</button>
        </div>
        <div class="list">
            <input type="password"  v-model="password" placeholder="请输入6~12位密码">
        </div>
        <div class="list">
            <input type="password"  v-model="password1" placeholder="请再次输入密码">
        </div>
        <div class="list">
            <input type="text"  v-model="inviteCode" placeholder="请输入邀请码">
        </div>
        <div class="login-btn flex-center" @click="submitForm">注册</div>
        <div class="back">
            <router-link to="/login" tag="span">登录</router-link>
        </div>
    </div>
</template>

<script>
    let timer;
    export default {
        name: "index",
        data(){
            return {
                tel:"",
                yzCode:"",
                inviteCode:"",
                codeText:"获取验证码",
                isAgainClick:true,
                password1:"",
                password:""
            }
        },
        mounted(){
            console.log(this.$route.query.code)
          this.inviteCode =   this.$route.query.code ? this.$route.query.code :""
        },
        methods:{
            sendCode(){
                if(this.isAgainClick){
                    if(!this.tel){
                        this.$toast('手机号不能为空');
                        return
                    }
                    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                    if(!myreg.test(this.tel)){
                        this.$toast('手机号输入有误');
                        return;
                    }
                    let s = 60;
                    this.codeText= s + "秒后重发";
                    this.isAgainClick = false;
                    timer = setInterval(()=>{
                        s--;
                        this.codeText= s + "秒后重发";
                        if(s == 0){
                            s = 60;
                            clearInterval(timer);
                            this.isAgainClick = true;
                            this.codeText= "重新发送";
                        }
                    },1000)
                    this.$http.post('sms/send',{
                        event:"register",
                        mobile:this.tel,
                    }).then(res=>{
                        this.$toast(res.msg)
                        console.log(res)
                    })
                }
            },
            submitForm(){
                if(!this.tel){
                    this.$toast('手机号不能为空');
                    return
                }
                if(!this.yzCode){
                    this.$toast('验证码不能为空');
                    return
                }
                if(!this.password && !this.password1){
                    this.$toast('密码不能为空');
                    return
                }
                if(this.password != this.password1){
                    this.$toast('两次密码输入不一致');
                    return
                }
                if(this.password.length < 6 || this.password.length >12){
                    this.$toast('密码长度有误');
                    return
                }
                var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if(!myreg.test(this.tel)){
                    this.$toast('手机号输入有误');
                    return;
                }
                this.$http.post('user/register',{
                    mobile:this.tel,
                    code:this.yzCode,
                    verification:this.inviteCode,
                    password: this.password
                }).then(res=>{
                    this.$toast(res.msg);
                    if(res.code == 1){
                        setTimeout(()=>{
                            this.$router.replace({
                                path:'/login'
                            })
                        },500)
                    }
                    console.log(res)
                })
            }
        },
        beforeDestroy() {
            clearInterval(timer);
        }
    }
</script>

<style scoped lang="less">
    .register{
        padding: 170px 70px;
        background: white;
        height: 100vh;
        box-sizing: border-box;
        h1{
            font-size: 50px;
            font-weight: normal;
        }
        .list{
            border-bottom: 2px solid #eee;
            padding-top: 50px;
            &:first-child{
                border-color: #185fff;
            }
            input{
                height: 70px;
                font-size: 28px;
                background: transparent;
                width: 100%;
            }
            .yzCode{
                width: 60%;
            }
            button{
                font-size: 26px;
                color: #185fff;
                background: white;
                border:0;
                outline: none;
            }
        }
        .login-btn{
            width: 606px;
            height: 88px;
            background-color: #185fff;
            box-shadow: 0px 10px 30px 0px
            rgba(18, 91, 255, 0.3);
            border-radius: 44px;
            font-size: 32px;
            color: #ffffff;
            margin-top: 140px;
        }
        .back{
            text-align: center;
            margin-top: 60px;
            color:#185fff;
        }
    }
</style>
